<template>
  <main id="main" ref="main" :style="{width: '100%',height}"></main>
</template>

<script lang="js">
const echarts = require("echarts")
export default {
  name: "cBar",
  props: {
    barData: {
      type: Object,
      default: () => ({
        xAxis: [],
        dataList: []
      })
    },
    height: {
      type: String,
      default: "100%"
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.chart = echarts.init(this.$refs['main'])
    const option = {
      tooltip: {},
      legend: {
        data: ['次均药品费', '次均材料费', '次均其他费'],
        top: "0%",
        left: '2%'
      },
      grid: {
        top: '16%',
        left: '2%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: this.barData.xAxis,
          axisLabel: {
            show: true,
            textStyle: {
              color: '#484D78',
              fontSize: 12
            }
          }
        }
      ],
      yAxis: [
        {
          splitArea: {show: false},
          type: 'value',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              align: 'right',
              color: '#484D78',
              fontSize: 12
            }
          }
        }
      ],
      series: this.barData.dataList.map((item, index) => ({
        name: item.title,
        type: 'bar',
        stack: 'one',
        barWidth: 42,
        emphasis: {
          itemStyle: {
            barBorderWidth: 1,
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowColor: 'rgba(0,0,0,0.5)'
          }
        },
        itemStyle: {
          color: item.color
        },
        data: item.data
      }))
    };
    this.chart.setOption(option);
  }
}
</script>

<style scoped lang="stylus">

</style>
